<template>
  <div class="app">
    <div class="p-2 border-bottom pb-0">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small " label-width="120px">
        <el-form-item label="姓名/手机号/证件号" label-width="140px">
          <el-input v-model="formInline.user" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="多学员">
          <el-input v-model="formInline.user" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="校区">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报名点">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="招生部门">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申领类型" label-width="140px">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报名时间" label-width="120px">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止报名时间">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label=" " label-width="60px">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="mt-2 px-2">
      <el-tabs v-model="tabs" type="card" @tab-click="tabHande">
          <el-tab-pane :label="v.name" :name="v.label" v-for="(v, i) in tabList" :key="i"></el-tab-pane>
        </el-tabs>
    </div>

    <div class="px-2" style="height: 595px;">
      <el-table :data="tableData" border height="100%">
        <el-table-column prop="ID" label="ID" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="150" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="120" align="center">
        </el-table-column>
        <el-table-column prop="car" label="车型" width="120" align="center">
        </el-table-column>
        <el-table-column prop="statestr" label="当前进度" width="120" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="手机号" width="180" align="center">
        </el-table-column>

        <el-table-column prop="idcard" label="身份证号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="money" label="主营" align="center" width="180">
        </el-table-column>

        <el-table-column prop="act_money" label="实收" align="center" width="180">
        </el-table-column>
        <el-table-column prop="lost_money" label="欠款" align="center" width="180">
        </el-table-column>
        <el-table-column prop="class" label="练车级别" align="center" width="180">
        </el-table-column>

        <el-table-column prop="com_namestr" label="挂靠点" align="center" width="180">
        </el-table-column>
        <el-table-column prop="leader" label="科二教练" align="center" width="180">
        </el-table-column>
        <el-table-column prop="leader2" label="科三教练" align="center" width="180">
        </el-table-column>
        <el-table-column prop="firstperson" label="建立人" align="center" width="180">
        </el-table-column>

        <el-table-column prop="firsttime" label="建立时间" align="center" width="250">
        </el-table-column>

        <el-table-column prop="editer" label="修改人" align="center" width="180">
        </el-table-column>

        <el-table-column prop="edittime" label="修改时间" align="center" width="250">
        </el-table-column>

        <el-table-column label="身份证地址" align="center" width="250">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.idaddress" placement="right-start">
              <span class="text-overflow">{{ scope.row.idaddress }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="StudyType" label="类型" align="center" width="180">
        </el-table-column>

        <el-table-column prop="teacherName" label="班主任名称" align="center" width="180">
        </el-table-column>

        <el-table-column prop="address" width="180" label="操作" align="center" fixed="right">
          <el-button type="primary" plain size="mini">编辑</el-button>
          <el-button type="danger" plain size="mini" class="el-icon-delete">删除</el-button>
        </el-table-column>
      </el-table>

    </div>
    <!-- 分页 -->
    <div class="pagin px-2">
      <el-pagination background :current-page="initParams.page" :page-sizes="[20, 50, 100, 150]"
        :page-size="initParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-11-29 09:06:22  星期三
* @description   我的学员
**/

import { teacherAPI } from '@/api/adminstare'
export default {
  name: 'teachConfig',
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      // 初始化参数
      initParams: {
        action: "myStudentList",
        page: 1,
        pageSize: 20,
        // isExactQuery: 0,
        sortStr: "id desc",
      },
      // 分页总条数
      total: 0,
      thisYear: '2023',//本年年份
      tabList: [
        {name:'全部',label:'0',state:0},
        { name: '待分进度', label :'1'},
        { name: '未受理', label:'2' },
        { name: '受理成功', label:'3' },
        { name: '退办', label:'4' },
        { name: '待科目一', label :'5'},
        { name: '待科目二', label:'6' },
        { name: '待科目三', label :'7'},
        { name: '待科目四', label:'8'},
        { name: '毕业', label:'9' },
        { name: '无需考试学员', label :'10'},
      ],
      tabs:''
    }
  },
  mounted() {
    this.getListData()

    this.getTabData()
  },
  methods: {
    async getListData() {
      const result = await teacherAPI(this.initParams)
      this.total = result.total
      this.tableData = result.data
    },
    // 当前显示的条数 发生改变时触发
    handleSizeChange(pageSize) {
      this.initParams.pageSize = pageSize || 20
      this.getListData()
    },
    // 当前页码发生改变时触发
    handleCurrentChange(page) {
      this.initParams.page = page || 1
      this.getListData()
    },

    async getTabData() { 
      const { data} = await teacherAPI({ action: 'myStudentStateList' })
      this.tabList[0].name+=`(${data[0].sum})`
      this.tabList[1].name += `(${data[0].sumstate_1})`
      this.tabList[2].name += `(${data[0].sumstate_11})`
      this.tabList[3].name += `(${data[0].sumstate_12})`

      this.tabList[4].name += `(${data[0].sumstate_13})`
      this.tabList[5].name += `(${data[0].sumstate_20})`
      this.tabList[6].name += `(${data[0].sumstate_30})`
      this.tabList[7].name += `(${data[0].sumstate_40})`
      this.tabList[8].name += `(${data[0].sumstate_50})`
      this.tabList[9].name += `(${data[0].sumstate_60})`
      this.tabList[10].name += `(${data[0].sumstate_90})`
    },

    tabHande(tab) {
      console.log(tab.index);
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  background-color: white;
  width: 100%;
  height: 100%;
}

.pagin {
  align-items: center;
}
</style>